﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>template-policy</title>

	<!-- WinJS references -->
	<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
	<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
	<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

	<link href="template-policy.css" rel="stylesheet" />
	<script src="template-policy.js"></script>
</head>
<body>
	<div class="template-policy-page description-page fragment">
		<header aria-label="Header content" role="banner">
			<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
			<h1 class="titlearea win-type-ellipsis">
				<span class="pagetitle">Privacy Policy flyout item template</span>
			</h1>
		</header>

		<section aria-label="Main content" role="main">
			<p>
				The WinJS Toolkit provides a Visual Studio item template that you can use to create a Privacy Policy flyout in your Windows Store application. 
				The template contains a customized HTML, a CSS and a JS file.
			</p>
			
			<h2>Usage</h2>		
			
			<p>
				Create a folder in your solution for the HTML, CSS and JS file of the Privacy Policy flyout. The standard location is within the <strong>pages</strong> folder.
			</p>
			
			<p>
				Right click on the newly created folder, then select <strong>Add</strong> &raquo; <strong>New item</strong>. Select the <strong>Privacy Policy flyout (WinJS Toolkit)</strong>
				from the <strong>WinJS Toolkit</strong> category in the Add New Item dialog.
			</p>
			
			<p>
				After the items are created, add the following lines of code to the <strong>default.js</strong> file within the <strong>activated</strong> handler:
			</p>

			<textarea>
app.onsettings = function( e ) {
	e.detail.applicationcommands = {
		'policy': {
			href: '/pages/policy/policy.html',
			title: 'Privacy policy'
		}
	};

	WinJS.UI.SettingsFlyout.populateSettings( e );
};
</textarea>
			
			<p>
				Note that the first <strong>'policy'</strong> must match the value of the first <strong>div</strong> tag in the HTML file of the Privacy Policy flyout!
			</p>
			
			<p>
				Please don't forget to customize the HTML content and the colors in the CSS file!
			</p>

		</section>
	</div>
</body>
</html>
